<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
          <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

        </el-breadcrumb>
        <el-button @click="insertAccomodation" style="text-align: left;">新增</el-button>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{$store.state.empName}}</span>

        <!--  表数据-->

        <el-main>
          <el-table :data="page.records" border>
            <el-table-column prop="accommodationId" label="住宿信息编号" width="110"></el-table-column>
            <el-table-column prop="studentId" label="学员编号" width="90"></el-table-column>
            <el-table-column prop="dormNumber" label="宿舍门牌号" width="100"></el-table-column>
            <el-table-column prop="dormType" label="宿舍类型" width="90">
              <template slot-scope="scope">
                <span>{{showType(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="totalCount" label="人数" width="80"></el-table-column>
            <el-table-column prop="isMixed" label="是否混寝" width="100">
              <template slot-scope="scope">
                <span>{{showisMixed(scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remakes" label="备注"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <a href="#" @click="updateAccommodation(scope.row)">修改</a>
                <a href="#" @click="deleteAccommodation(scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
          <!--      分页控件-->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="[5, 8, 10, 12]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
            </el-pagination>
          </div>
        </el-main>
        <!--    添加/修改住宿对话框-->
        <el-dialog
          title="操作住宿"
          :visible.sync="insertAccomodationDialogVisible"
          width="50%"
          :before-close="handleClose">
          <div id="studentChangeForm">
            <span v-if="acc.accommodationId!=null">住宿信息编号</span>
            <el-input v-model="acc.accommodationId" placeholder="住宿信息编号" v-if="acc.accommodationId!=null" style="width: 220px"></el-input><br>
            <span>学员编号</span>
            <el-input v-model="acc.studentId" placeholder="学员编号" style="width: 220px"></el-input><br>
            <span>宿舍门牌号</span>
            <el-input v-model="acc.dormNumber" placeholder="宿舍门牌号" style="width: 220px"></el-input><br>
            <span>宿舍类型</span>
            <el-radio v-model="acc.dormType" label="0" style="width: 120px">男寝室</el-radio>
            <el-radio v-model="acc.dormType" label="1">女寝室</el-radio>
            <span>人数</span>
            <el-input v-model="acc.totalCount" placeholder="人数" style="width: 220px"></el-input><br>
            <span>是否混寝</span>
            <el-radio v-model="acc.isMixed" label="0" style="width: 120px">是</el-radio>
            <el-radio v-model="acc.isMixed" label="1">否</el-radio>
            <span>备注</span>
            <el-input v-model="acc.remarks" placeholder="备注" style="width: 220px"></el-input><br>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="accomodationDialogCancel">取 消</el-button>
        <el-button type="primary" @click="accomodationDialogCommit">确 定</el-button>
      </span>
        </el-dialog>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import instance from "../../utils/request";

export default {
  name: "Accommodation",
  data(){
    return{
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      acc:{},
      insertAccomodationDialogVisible:false,//添加或修改住宿
    }
  },
  methods:{
    showType(row, column) {//显示住宿类型
      let type='';
      if(row.dormNumber==0){
        type = '女寝室';
      }else {
        type = '男寝室';
      }
      return type;
    },
    showisMixed(row,column){
      let is='';
      if (row.dormType==0){
        is='否';
      }else {
        is='是';
      }
      return is;
    },
    updateAccommodation(row) {//修改住宿信息
      this.acc.accommodationId = row.accommodationId;
      instance.get("/accommodation/"+row.accommodationId).then(res=>{
        this.acc = res.data;
      });
      this.insertAccomodationDialogVisible = true;
    },
    deleteAccommodation(row){//删除住宿信息
      instance.delete("/accommodation/"+row.accommodationId).then(res=>{
        if (res.data>0){
          this.$message("删除成功");
          this.selectAll();
          this.$router.push({name:'Accommodation'});
        }else {
          this.$message("删除失败");
        }
      });
      this.selectAll();
      // this.$router.push({name:'Accommodation'});
    },
    insertAccomodation(){
      this.acc={};
      this.insertAccomodationDialogVisible=true;
    },
    accomodationDialogCommit(){//添加/修改住宿 对话框提交
      //提交到后台
      instance.post("/accommodation",this.acc).then(res=>{
        if (res.data>0){//受影响行数>0表示成功
          this.$message("操作成功!");
          this.selectAll();//重新加载住宿信息
        }
      });
      this.acc = {};//清空表单
      this.insertAccomodationDialogVisible = false;//关闭对话框
      this.selectAll();//重新加载住宿信息
    },
    accomodationDialogCancel(){
      this.$message("已取消!");
      this.acc = {};//清空表单
      this.insertAccomodationDialogVisible = false;//隐藏弹出窗
    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/accommodation/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
      });
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/accommodation/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
        this.selectAll();
        this.$router.push({name:'Accommodation'});
      });
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    selectAll(){
      instance.get("/accommodation/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page=res.data;
      });
    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    }
  },
  created() {
    this.selectAll();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
</style>
